import columnsData, { ColumnsItem } from './data'
import React, { useRef } from 'react';
import { Modal, Descriptions, Button } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getWithdrawRecord, getWithdrawRecordList } from './service'
import TableTitle from '../../../components/TableTitle'

export default () => {
  // 控制详情弹框的显示与隐藏
  const [withdrawRecordModal, setWithdrawRecordModal] = React.useState(false)
  // 储存当前查看数据
  const [withdrawRecord, setWithdrawRecord] = React.useState({})
  // 表头赋值
  const columns: ProColumns<ColumnsItem>[] = columnsData
  // 定义操作单元格
  const columnsRender = (text, record, _, action) => [
    <a key='check'
      onClick={() => handleDetails(record.serialNumber)}
    >
      查看
    </a>
  ]
  // 定义金额单元格
  const withdrawAmount = (text, record, _, action) => [
    <p key='withdrawAmount' style={{ textAlign: 'right', margin: 0 }}>{record.withdrawAmount}</p>
  ]
  const handlingCharge = (text, record, _, action) => [
    <p key='handlingCharge' style={{ textAlign: 'right', margin: 0 }}>{record.handlingCharge}</p>
  ]
  const amountReceived = (text, record, _, action) => [
    <p key='amountReceived' style={{ textAlign: 'right', margin: 0 }}>{record.amountReceived}</p>
  ]
  // 定义结果单元格
  const resultRender = (text, record, _, action) => [
    <div key={record.result}>
      {
        record.result === 'Processing' ?
          <p style={{ textAlign: 'center', margin: 0 }}>交易中</p> :
          record.result === 'Success' ?
            <p style={{ textAlign: 'center', margin: 0, color: '#52c41a' }}>成功</p> :
            record.result === 'Failure' ?
              <p style={{ textAlign: 'center', margin: 0, color: '#ff4d4f' }}>失败</p> :
              null
      }
    </div>
  ]
  // 列渲染样式赋值
  columns.forEach(item => {
    item.dataIndex === 'result' ? item.render = resultRender : undefined
    item.dataIndex === 'withdrawAmount' ? item.render = withdrawAmount : undefined
    item.dataIndex === 'handlingCharge' ? item.render = handlingCharge : undefined
    item.dataIndex === 'amountReceived' ? item.render = amountReceived : undefined
    item.valueType === 'option' ? item.render = columnsRender : undefined
  })
  // Table action 的引用，便于自定义触发
  const actionRef = useRef<ActionType>();

  /**
   * 查看按钮回调
   * @param serialNumber 流水号
   */
  const handleDetails = async (serialNumber: string) => {
    const WithdrawRecord = await getWithdrawRecord({ serialNumber })
    setWithdrawRecord(WithdrawRecord.data[0])
    setWithdrawRecordModal(true)
  }

  return (
    <div>
      {/* 表格 */}
      <ProTable<ColumnsItem>
        scroll={{ x: 900 }}
        bordered
        headerTitle={<TableTitle title='提现记录' />}
        columns={columns}
        actionRef={actionRef}
        request={async params =>
          getWithdrawRecordList(params)
        }
        // 本地储存表格列的显示参数
        columnsState={{
          persistenceKey: 'withdrawRecordList',
          persistenceType: 'localStorage',
        }}
        // 每行表格的key
        rowKey="serialNumber"
        // 搜索表单布局配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单配置
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        // 分页相关配置
        pagination={{
          // 初始页面数据条数
          pageSize: 10,
        }}
        dateFormatter="string"
      />
      <Modal
        title={<div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ width: 6, height: 20, backgroundColor: 'skyblue', marginRight: 6 }}></div>
          <span>提现记录</span>
        </div>}
        width={1000}
        centered
        visible={withdrawRecordModal}
        footer={
          <Button
            type="primary"
            htmlType="submit"
            onClick={() => setWithdrawRecordModal(false)}
          >
            确认
          </Button>}
        onCancel={() => setWithdrawRecordModal(false)}
      >
        <Descriptions
          column={{ xxl: 4, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }}
        >
          <Descriptions.Item label="商户名">{withdrawRecord.merchant}</Descriptions.Item>
          <Descriptions.Item label="交易日期">{withdrawRecord.created_at}</Descriptions.Item>
          <Descriptions.Item label="提现方式">{withdrawRecord.withdrawWay}</Descriptions.Item>
          <Descriptions.Item label="提现账号">{withdrawRecord.withdrawWay}</Descriptions.Item>
          <Descriptions.Item label="目标账号/目标钱包"> </Descriptions.Item>
          <Descriptions.Item label="交易流水">{withdrawRecord.serialNumber}</Descriptions.Item>
          <Descriptions.Item label="提现金额">{withdrawRecord.withdrawAmount}</Descriptions.Item>
          <Descriptions.Item label="提现币别">{withdrawRecord.withdrawCurrency}</Descriptions.Item>
          <Descriptions.Item label="手续费">{withdrawRecord.handlingCharge}</Descriptions.Item>
          <Descriptions.Item label="手续费币别">{withdrawRecord.handlingChargeCurrency}</Descriptions.Item>
          <Descriptions.Item label="到账金额">{withdrawRecord.amountReceived}</Descriptions.Item>
          <Descriptions.Item label="到账币别">{withdrawRecord.amountReceivedCurrency}</Descriptions.Item>
          <Descriptions.Item label="汇率">{withdrawRecord.exchangeRate}</Descriptions.Item>
          <Descriptions.Item label="交易状态">{withdrawRecord.result}</Descriptions.Item>
          {
            withdrawRecord.result === 'Failure' ?
              <Descriptions.Item label="失败原因"> </Descriptions.Item> : null
          }
        </Descriptions>
      </Modal>
    </div>
  );
};